.screenContainer {
  width: 100%;
  min-height: 100vh;
  background-color: #061d3a;
  background-image: radial-gradient(circle at 30% 20%, rgba(4, 42, 100, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(4, 44, 90, 0.3) 0%, transparent 50%), linear-gradient(to bottom, #071831, #082447);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.screenContainer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
.fullscreenContainer {
  composes: screenContainer;
  padding: 20px;
}
.fullscreenButton {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  z-index: 1000;
  border: 1px solid rgba(32, 86, 187, 0.5);
  color: #fff;
}
.fullscreenButton:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  height: 60px;
}
.leftNav,
.rightNav {
  width: 150px;
  height: 100%;
}
.leftNav .navItem,
.rightNav .navItem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leftNav .navItem span,
.rightNav .navItem span {
  color: #fff;
  font-size: 16px;
}
.contentWrapper {
  padding: 0 10px;
  flex: 1;
}
.dataOverviewLeft,
.dataOverviewRight {
  height: 280px;
  padding: 10px;
  position: relative;
}
.dataOverviewLeft .overviewTitle,
.dataOverviewRight .overviewTitle {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
.dataOverviewLeft .cardGroup,
.dataOverviewRight .cardGroup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dataOverviewLeft .cardGroup .dataCard,
.dataOverviewRight .cardGroup .dataCard {
  background-color: rgba(3, 37, 108, 0.5);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}
.dataOverviewLeft .cardGroup .dataCard .value,
.dataOverviewRight .cardGroup .dataCard .value {
  font-size: 22px;
  font-weight: bold;
  color: #36a8fe;
  margin-bottom: 5px;
}
.dataOverviewLeft .cardGroup .dataCard .label,
.dataOverviewRight .cardGroup .dataCard .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.centerContent {
  display: flex;
  flex-direction: column;
  height: 280px;
  gap: 15px;
}
.centerContent .totalNumbers {
  height: 120px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.centerContent .totalNumbers .numberTitle {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
}
.centerContent .totalNumbers .numberRow {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.centerContent .chartsRow {
  flex: 1;
}
.centerContent .chartsRow .chartBox {
  height: 100%;
  padding: 10px;
}
.centerContent .chartsRow .chartBox .chartTitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}
.middleRow {
  margin-top: 15px;
}
.middleRow .leftChart,
.middleRow .pieChart {
  height: 280px;
  padding: 10px;
}
.middleRow .leftChart .chartTitle,
.middleRow .pieChart .chartTitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
.numberStatsRow {
  margin-top: 15px;
}
.numberStatsRow .numberStatBox {
  height: 100px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.numberStatsRow .numberStatBox .statTitle {
  font-size: 16px;
  margin-bottom: 15px;
  color: #fff;
}
.numberStatsRow .numberStatBox .bigNumber {
  font-size: 30px;
  font-weight: bold;
  color: #36a8fe;
}
.bottomRow {
  margin-top: 15px;
  margin-bottom: 15px;
}
.bottomRow .bottomLeftCol,
.bottomRow .bottomRightCol {
  height: 100%;
}
.bottomRow .bottomLeftCol .infoList,
.bottomRow .bottomRightCol .infoList {
  height: 200px;
  padding: 10px;
}
.bottomRow .bottomLeftCol .infoList .infoTitle,
.bottomRow .bottomRightCol .infoList .infoTitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
.bottomRow .bottomLeftCol .bottomLeftChart,
.bottomRow .bottomRightCol .bottomLeftChart,
.bottomRow .bottomLeftCol .bottomRightChart,
.bottomRow .bottomRightCol .bottomRightChart {
  height: 280px;
  padding: 10px;
}
.bottomRow .bottomLeftCol .bottomLeftChart .chartTitle,
.bottomRow .bottomRightCol .bottomLeftChart .chartTitle,
.bottomRow .bottomLeftCol .bottomRightChart .chartTitle,
.bottomRow .bottomRightCol .bottomRightChart .chartTitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
.bottomRow .centerBottomChart {
  height: 500px;
  padding: 10px;
}
.bottomRow .centerBottomChart .chartTitle {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
